<script setup lang="ts" name="GoodsList">
import { Plus, Search, Filter, Refresh, Compass, Delete, Edit } from "@element-plus/icons-vue"
import { useTablePage } from '@/hooks/useTablePage'
import { notify } from "@/utils/element"
import { getPageList, deleteById, updateStatus } from '@/api/goods/list'

const statusOptions = ref<Options[]>([
  {
    label: '已下架',
    value: '0',
  },
  {
    label: '已上架',
    value: '1',
  }
])
/**
 * 表格参数
 */
const {
  tableListRef,
  queryFormRef,
  editRef,
  loading, pageTypes, query, tableList, queryVisible,
  queryData,
  handleQuery,
  resetForm,
  filterButton,
  handleDelete,
  handleEdit,
  handleAdd,
} = useTablePage<GoodsType, GoodsQuery>({ getPageList, deleteById })

//修改商品状态
async function changeStatus(row: GoodsType) {
  // console.log('changeStatus', row);
  try {
    row.loading = true;
    const { id, status } = row;
    const newStatus = status == 0 ? 1 : 0;
    const { data } = await updateStatus({ id, status: newStatus });
    if (data.code != 20000) return false; // 阻止切换
    notify('状态更新成功！', { type: 'success' });
    return true; // 允许切换
  } catch (error) {
    return false; // 阻止切换
  } finally {
    row.loading = false;
  }
}
</script>

<template>
  <div class="page-nav" v-loading="loading">
    <div class="search">
      <div class="search-btn">
        <el-button :icon="Filter" @click="filterButton()">{{ queryVisible ? '隐藏' : '查询' }}</el-button>
        <el-button :icon="Plus" @click="handleAdd()">新增商品</el-button>
      </div>
      <div class="search-params" v-show="queryVisible">
        <el-form inline :model="query" ref="queryFormRef">
          <el-form-item label="名称/编码" prop="keyword">
            <el-input v-model="query.keyword" maxlength="100" placeholder="请输入商品名称/编码/简码" clearable
              style="width: 200px;" />
          </el-form-item>
          <el-form-item label="商品状态" prop="status">
            <el-select-v2 v-model="query.status" :options="statusOptions" placeholder="请输入商品状态" clearable filterable
              style="width: 200px;"></el-select-v2>
          </el-form-item>
          <el-form-item style="margin-left: 20px;">
            <el-button :icon="Search" type="primary" @click="handleQuery()">搜 索</el-button>
            <el-button :icon="Refresh" type="success" @click="resetForm(queryFormRef)">重 置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="table-bar">
      <el-table :class="queryVisible ? 'table-minHeight' : 'table-maxHeight'" ref="tableListRef" :data="tableList"
        border stripe>
        <el-table-column fixed="left" align="left" header-align="center" label="商品名称/编码" width="230"
          show-overflow-tooltip>
          <template #default="{ row }">
            <div class="flex">
              <el-avatar shape="square" :size="50" :src="row.imageUrl" :icon="Compass" />
              <div class="ml5">
                <div>{{ row.name }}</div>
                <el-link type="primary">{{ row.code }}</el-link>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="specsName" label="商品规格" show-overflow-tooltip />
        <el-table-column align="center" prop="categoryName" label="分类名称" show-overflow-tooltip />
        <el-table-column align="center" prop="quickCode" label="快捷码" show-overflow-tooltip />
        <el-table-column align="center" prop="unitName" label="单位" show-overflow-tooltip />
        <el-table-column align="center" prop="stockNum" label="库存" />
        <el-table-column align="center" prop="price" label="销售价" />
        <el-table-column align="center" label="商品特价" width="110">
          <template #default="{ row }">
            {{ row.discountPrice ? `￥${row.discountPrice}` : '无' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="cost" label="成本价" />
        <el-table-column align="center" sortable prop="createTime" label="入库时间" width="105" />
        <el-table-column align="center" label="商品状态" width="110">
          <template #default="{ row }">
            <el-switch v-model="row.status" active-text="已上架" inactive-text="已下架" :active-value="1" :inactive-value="0"
              inline-prompt :loading="row.loading" :before-change="() => changeStatus(row)" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="160">
          <template #default="{ row }">
            <el-button @click.stop="handleEdit(row)" :icon="Edit" type="warning" link>修改</el-button>
            <el-popconfirm @confirm="handleDelete(row.id)" width="auto" :title="`确定永久删除【${row.name}】吗？`">
              <template #reference>
                <el-button :icon="Delete" type="danger" link>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <pagination :page="pageTypes" @pageChange="queryData"></pagination>
    <!-- 新增、修改组件 -->
    <GoodsEdit ref="editRef" @refresh="queryData" />
  </div>
</template>

<style scoped lang="scss"></style>